iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
2
Modern Web

RE:從零開始的學習 JS 生活系列 第 25

EP.24 RE:從零開始的學習 JS 生活-第二十四日

  • 分享至 

  • xImage
  •  

前言

轉生第二十四日,這一篇將會介紹 undefined 以及 not defined 的差異

undefined

身為 JavaScript 開發者 undefined 以及 not defined 是非常常見的,當然如果能夠搞懂這兩者差異,對於自己在實際開發上是有一定幫助,首先我們可以在 MDN 文件中可以看到 MDN 自己都形容 JavaScript 裡面有一個有點奇怪的關鍵字,那個關鍵字是 undefined,那 undefined 到底是什麼?讓我們先從程式碼來了解吧。

在前一篇我們了解 Hoisting 的特性,當變數在建立的時候,我們知道會有兩階段,其中一階段就是提升階段,當變數被提升時其實會被賦予一個預設值,也就是 undefined,讓我們來建立一個變數看看 ↓

var a = 1;
console.log('a:' + a);

一開始我們正常運行可以預先知道我們將會得到 a:1 的答案 ↓

a:1

但是如果此時我們再將 console.log('a:' + a); 丟到 var a = 1; 的前面呢?那此時會發生何事?

console.log('a:' + a);
var a = 1;
console.log('a:' + a);

我們會發現第一個 a 會輸出 undefined

undefined

讓我們回頭思考一下 Hoisting 的階段,並將上面程式碼做拆解,首先變數會被提升至最前面,所以實際程式碼會是這個樣子:

// 創造階段
var a;

// 執行階段
console.log('a:' + a);
a = 1;
console.log('a:' + a);

那由於 JavaScript 有 Hoisting 特性,所以通常 JavaScript 會預設替提升的變數賦予一個特殊關鍵字,注意是特殊關鍵字,也就是 undefined,所以若你只輸入以下程式碼,其實就可以看到 a 會被預設賦予 undefined

var a
console.log(a);

undefined

由此可知我們可以理解一件事情,變數在還沒賦予值之前是會被賦予預設值,也就是 undefined,但是這邊要注意一件事情千萬不要替變數賦予 undefined,這將會導致你搞不清楚該變數到底有沒有被賦值。

如果你真的要賦值,我會建議改用 null

我們可以看到若單純只建立變數而不賦予值就會得到 undefined,反之若沒有建立變數則會出現 not defined

not defined

not defined 以字面上來看就是未定義的意思,什麼叫未定義?我們可以從程式碼來觀看:

console.log(mon);

從上述程式碼我們可以理解到一件事情,not defined 的白話文意思就是沒有這個東西啦!!

兇,怕豹.jpg

所以當你以後看到 XXX is not defined,就代表你忘記宣告變數(函式)或是名子打錯囉~

mon is not defined

結尾

下一篇的 RE:從零開始的學習 JS 生活-第二十四日將會介紹 Callback Hell。

本文同步發表於:https://hsiangfeng.github.io/javascript/20191009/1275371038/


上一篇
EP.23 RE:從零開始的學習 JS 生活-第二十三日
下一篇
EP.25 RE:從零開始的學習 JS 生活-第二十五日
系列文
RE:從零開始的學習 JS 生活32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言